<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>软装到家</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, maximum-scale=1.0">
    <meta content="telephone=no,email=no" name="format-detection">
    <meta name="keywords" content="">
    <meta name="description" content="软装到家">
    <script>
        (function(b,a){var c={};(function(){var j=a.querySelector('meta[name="viewport"]'),n=a.querySelector('meta[name="hotcss"]'),h=b.devicePixelRatio||1,i=540,m=0;h=h>=3?3:(h>=2?2:1);if(n){var f=n.getAttribute("content");if(f){var l=f.match(/initial\-dpr=([\d\.]+)/);if(l){h=parseFloat(l[1])}var k=f.match(/max\-width=([\d\.]+)/);if(k){i=parseFloat(k[1])}var d=f.match(/design\-width=([\d\.]+)/);if(d){m=parseFloat(d[1])}}}a.documentElement.setAttribute("data-dpr",h);c.dpr=h;a.documentElement.setAttribute("max-width",i);c.maxWidth=i;if(m){a.documentElement.setAttribute("design-width",m)}c.designWidth=m;var e=1/h,g="width=device-width, initial-scale="+e+", minimum-scale="+e+", maximum-scale="+e+", user-scalable=no";if(j){j.setAttribute("content",g)}else{j=a.createElement("meta");j.setAttribute("name","viewport");j.setAttribute("content",g);a.head.appendChild(j)}})();c.px2rem=function(e,d){if(!d){d=parseInt(c.designWidth,10)}return parseInt(e,10)*320/d/20};c.rem2px=function(e,d){if(!d){d=parseInt(c.designWidth,10)}return e*20*d/320};c.mresize=function(){var d=a.documentElement.getBoundingClientRect().width||b.innerWidth;if(c.maxWidth&&(d/c.dpr>c.maxWidth)){d=c.maxWidth*c.dpr}if(!d){return false}a.documentElement.style.fontSize=(d*20/320)+"px";c.callback&&c.callback()};c.mresize();b.addEventListener("resize",function(){clearTimeout(c.tid);c.tid=setTimeout(c.mresize,33)},false);b.addEventListener("load",c.mresize,false);setTimeout(function(){c.mresize()},333);b.hotcss=c})(window,document);
    </script>    <link rel="stylesheet" href="//at.alicdn.com/t/font_xdicf608ih8semi.css">
    <link rel="stylesheet" href="${ctx }/res/css/share.css">
</head>
<body>
<div class="banner">
    <img src="${ctx }/res/img/banner/banner_1@2x.png">
</div>
<div class="detail-box clearfix">
    <div class="authors">
    
        <img src='<c:if test="${not empty n.user.headImage }">${n.user.headImage }</c:if>' /> 
        <span class="name">${n.user.nickName }</span>
    </div>
</div>
<div class="detail-box pd100">
    <p>${n.content }</p>
    <div class="slider">
        <div class="tab-img">
          <c:forEach items="${n.imageArr }" var="i" begin="0" end="0">
          <img class="img-detail" src="${i }" />
          </c:forEach>  
        </div> 
        <div class="tab-nav swiper-container">
           <ul class="swiper-wrapper">
               <c:forEach items="${n.imageArr }" var="i">
               <li class="swiper-slide"><img src="${i }"></li>
               </c:forEach>
           </ul> 
        </div>
    </div>
</div>
<div class="appdown">
   	<img src="${ctx }/res/img/logo.jpg">
    <h2>软装到家</h2>
    <p>大美中国 改变世界</p>
    <a href="https://itunes.apple.com/cn/app/ruan-zhuang-dao-jia/id1026600876?mt=8">下载app</a>
</div>
<script type="text/javascript" src="${ctx }/res/js/lib.js"></script>
<script type="text/javascript" src="${ctx }/res/js/appshare.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var swiper = new Swiper('.swiper-container', {
            slidesPerView: 'auto',
            spaceBetween: 30,
            freeMode: true,
            onClick:function (swiper,event) {
                var currentImg = $(event.target);
                var bigImg = currentImg.parents('.slider').find('.img-detail');
                bigImg.hide().attr('src',currentImg.attr('src')).fadeIn()
            }
        });
    })
</script>
</body>
</html>